<template>
  <view :class="[`${prefixCls}-activity-form-container`]">
    <uv-form ref="uvForm" :model="formData" :rules="rules" errorType="toast">
      <uv-form-item prop="phone" :customStyle="{ marginBottom: '4px' }">
        <uv-input
          v-model="formData.phone"
          type="number"
          maxlength="11"
          shape="circle"
          fontSize="16px"
          :customStyle="{ backgroundColor: '#f7f8fa', borderColor: '#f7f8fa !important' }"
          placeholder="请输入手机号"
        />
      </uv-form-item>

      <uv-form-item prop="sms_code">
        <uv-input
          v-model="formData.sms_code"
          type="number"
          maxlength="6"
          shape="circle"
          fontSize="16px"
          :customStyle="{ backgroundColor: '#f7f8fa', borderColor: '#f7f8fa !important' }"
          placeholder="请输入验证码"
        >
          <template #suffix>
            <cu-verify-code mode="text" type="primary" :customStyle="{ color: '#439DBC', fontSize: '14px' }" :mobile="formData.phone" mobileKey="phone" :extends="verifyExtends" />
          </template>
        </uv-input>
      </uv-form-item>
      <uv-button
        size="large"
        shape="circle"
        color="#fb6338"
        :custom-style="{ marginTop: '20px' }"
        :disabled="joinDisabled"
        :loading="joinLoading"
        @click="joinActivity"
        text="参与活动"
      ></uv-button>
    </uv-form>
  </view>
</template>

<script>
import SingSRA from '@/common/sign/signSRA'
import FormValidate from '@/common/validate/form'
import { joinBringActivity } from './../api'

const rules = {
  phone: FormValidate.mobile,
  sms_code: FormValidate.smscode,
}
export default {
  name: 'activityForm',
  components: {},
  mixins: [],
  props: {
    activityParams: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      rules,
      formData: {
        phone: '',
        sms_code: '',
      },

      joinDisabled: !1, // 参与按钮是否禁用
      joinLoading: !1, // 参与按钮是否loading
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    verifyExtends() {
      const antiData = {
        phone: this.formData.phone,
        uid: this.formData.phone,
        timestamp: new Date().getTime() / 1000,
      }
      return {
        anti_data: SingSRA.objRsaEncrypt(antiData),
      }
    },
  },

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    // 参与活动
    joinActivity() {
      this.$refs.uvForm
        .validate()
        .then(async (res) => {
          console.log('🚀 ~ .then ~ res:', res)
          if (res) {
            // #ifdef MP
            const { session_key } = await this.$Platform.useProvider().getSessionId()
            // #endif
            const _formData = {
              ...this.formData,
              // #ifdef MP
              sessionKey: session_key,
              // #endif
            }
            await this.submit(_formData)
          }
        })
        .catch((errors) => {
          console.log('🚀 ~ joinActivity ~ errors:', errors)
        })
    },

    // 提交并注册登录新用户
    async submit(formData) {
      const params = {
        invitation_id: this.activityParams.inviteUId,
        ...formData,
      }
      const result = await joinBringActivity(params)
      this.$emit('onCallback', result)
    },
  },
}
</script>

<style lang="scss" scoped>
.#{prefixCls('activity-form-container')} {
  position: relative;
  padding-bottom: 30rpx;
  .activity-form-item {
    position: relative;
    flex: 1;
    .card-icon {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 80rpx;
      height: 80rpx;
      margin: 20rpx auto 24rpx;
      border-radius: 50%;
      background-color: #ecf5f8;
      overflow: hidden;
      z-index: 99;
    }
    .card-title {
      width: 80rpx;
      margin: 0 auto;
      font-size: 20rpx;
      color: #666;
    }
  }
  .activity-form-item::before,
  .activity-form-item::after {
    content: '';
    position: absolute;
    width: 50%;
    height: 0;
    left: 0;
    top: 61rpx;
    transform: translateY(-50%);
    border: 1rpx dashed #1ccdc3;
  }
  .activity-form-item::after {
    left: auto;
    right: 0;
  }
  .activity-form-item:first-child::before,
  .activity-form-item:last-child::after {
    width: 0;
    border: 0;
  }
}
</style>
